<template>
  <div class="e-chart-main">
    <div class="title-label">
      <div class="title-label-left">
        群发监控助手 
        <span  v-if="isMonitorShow" class="open">已开启</span>
        <span v-else class="close">已关闭</span>
      </div>
      <div class="title-label-right" @click="openSetting">
        <el-icon><Setting /></el-icon><span>高级设置</span>
      </div>
    </div>
    <div class="title-desc">
      <div>开启群发监控助手后，系统将帮助员工自动确认群发；当客户已达当日收到群发消息限制时，自动以私信消息发送。</div>
      <el-button v-if="isMonitorShow" type="danger" @click="handleMonitor(1)">关闭</el-button>
      <el-button v-else type="success" @click="handleMonitor(2)">开启</el-button>
    </div>
    <div class="content"> 
      <div class="line-item">
        <div class="line-item-tooltip1">
          <el-tooltip class="item" effect="dark" content="今日收到企微群发助手的消息总量" placement="top">
            <img src="@renderer/assets/imgs/common/question_icon.png" alt="">
          </el-tooltip>
        </div>
        <div class="line" ref="todayEventRef"></div>
      </div>
      <div class="line-item">
        <div class="line-item-tooltip2">
          <el-tooltip class="item" effect="dark" content="今日自动执行员工群发确认的数量" placement="top">
            <img src="@renderer/assets/imgs/common/question_icon.png" alt="">
          </el-tooltip>
        </div>
        <div class="line" ref="todayGroupRef"></div>
      </div>
      <div class="line-item">
        <div class="line-item-tooltip3">
          <el-tooltip class="item" effect="dark" content="今日通过群发发送成功的客户数量" placement="top">
            <img src="@renderer/assets/imgs/common/question_icon.png" alt="">
          </el-tooltip>
        </div>
        <div class="line" ref="todayGroupCustomersRef"></div>
      </div>
      <div class="line-item">
        <div class="line-item-tooltip4">
          <el-tooltip class="item" effect="dark" content="今日执行群发后已达今日消息上限的客户中，通过私信消息发送成功的消息总量" placement="top">
            <img src="@renderer/assets/imgs/common/question_icon.png" alt="">
          </el-tooltip>
        </div>
        <div class="line" ref="todayPrivateCustomersRef"></div>
      </div>
    </div>
    <!--  -->
    <Dialog ref="dialogRef" :state="DialogData" @confirm="onSubmit" @cancel="onCancel" />
    <!--  -->
    <SettingDialog ref="settingDialogRef" />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, inject, onMounted, onUnmounted } from 'vue'
import { export2Img } from '@renderer/utils/utils'
// import { Info as IconInfo } from '@element-plus/icons-vue'
import { massDispatchStatistics, setToggle, advancedShow } from '@renderer/ajax/api/groupMonitor'
import Dialog from '@renderer/components/dialog'
import SettingDialog from './Setting.vue'
import { ElMessage } from 'element-plus'
import { store } from '@renderer/store'

const eCharts: any = inject('ec')


const todayEventRef = ref<any>(null)
const todayGroupRef= ref<any>(null)
const todayGroupCustomersRef = ref<any>(null)
const todayPrivateCustomersRef = ref<any>(null)

const dialogRef = ref<any>(null)
const settingDialogRef = ref<any>(null)

const isMonitorShow = ref<boolean>(true)

const DialogData = reactive<any>({
  visible: false,
  width: '500px',
  title: '提示',
  content: '关闭后，您将不会再接收实时的群发任务，您确定要关闭吗？',
  footer: ['取消', '确定', 'center']
})

let timer = null

const getAdvancedShow = async () => {
  let info = store.getters['common/getUserInfo']
  let parasm = {
    CorpId: info.CorpID
  }
  let res: any = await advancedShow(parasm)
  isMonitorShow.value = res.Enable
  if(isMonitorShow.value) {
    clearInterval(timer)
    timer = setInterval(() => {
      initData()
    }, 5000)
  }
}

const handleMonitor = async (val: any) => {
  if(val == 1) {
    DialogData.visible = true
  }
  if(val == 2) {
    let info = store.getters['common/getUserInfo']
    let params = {
      corpId: info.CorpID,
      enable: 1 // 1开启 2：关闭
    }
    let res = await setToggle(params)
    isMonitorShow.value = true
    ElMessage.success('设置成功')
    console.log('开启定时器')
    timer = setInterval(() => {
      initData()
    }, 5000)
  }
   
}

const onSubmit = async () => {
  console.log('xxx')
  let info = store.getters['common/getUserInfo']
  let params = {
    corpId: info.CorpID,
    enable: 2 // 1开启 2：关闭
  }
  let res = await setToggle(params)
  DialogData.visible = false
  isMonitorShow.value = false
  ElMessage.success('设置成功')
  clearInterval(timer)

}

const onCancel = () => {
  DialogData.visible = false
}

// 高级设置
const openSetting = () => {
  settingDialogRef.value.dialogInfo.visible = true
 
}

const getEChartsLine = (val: any,refs: any, index) => {
  let textList = ['今日事件总量：  ','今日群发量：  ','今日群发客户数：  ','今日私信客户人次：  ']
  const myChartLine = eCharts.init(refs)
  let option = {
    title: {
      text: textList[index] + val.Total
    },
    // tooltip: {
    //   type: 'showTip',
    //   position: [22, 22]
    // },
    xAxis: {
      type: 'category',
      data: val.DataList.Time
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: val.DataList.Data,
        type: 'line'
      }
    ]
  }
  myChartLine.setOption(option)
  console.log(myChartLine,'x')
  window.addEventListener('resize', function () {
    //执行
    if (myChartLine) {
      // 判断一下，防止在初始化的时候报错，cannot read property 'resize' of null
      myChartLine.resize()
    }
  })
}

const initData = async () => {
  let res = await massDispatchStatistics({})
  console.log(res,'1')
  let list: any = res || []
  list.forEach((el, index) => {
    if(index == 0) {
      getEChartsLine(el, todayEventRef.value, index)
    }else if(index == 1) {
      getEChartsLine(el, todayGroupRef.value, index)
    }else if(index == 2) {
      getEChartsLine(el, todayGroupCustomersRef.value, index)
    }else if(index == 3) {
      getEChartsLine(el, todayPrivateCustomersRef.value, index)
    }
  })
 
}

onMounted(() => {
  initData()
  getAdvancedShow()
  // getEChartsLine({}, todayEventRef.value)
  // getEChartsLine({}, todayGroupRef.value)
  // getEChartsLine({}, todayGroupCustomersRef.value)
  // getEChartsLine({}, todayPrivateCustomersRef.value)

})

onUnmounted(() => {
  console.log('销毁定时器')
  clearInterval(timer)
})

</script>
<style lang="scss" scoped>
.e-chart-main {
  .title-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    .title-label-left {
      span {
        padding-left: 18px;
      }
      .open {
        color: green;
      }
      .close {
        color: red;
      }
    }
    .title-label-right {
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      color: #0433ff;
      span {
        padding-left: 6px;
      }
    }
  }
  .title-desc {
    margin: 24px 0;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #e8e8e8;
  }
  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .line-item {
      position: relative;
      width: 100%;
      height: 300px;
      .line {
        width: 100%;
        height: 100%;
      }
      .line-item-tooltip1 {
        position: absolute;
        top: 4px;
        left: 120px;
        width: 16px;
        height: 16px;
        z-index: 9;
      }
      .line-item-tooltip2 {
        position: absolute;
        top: 4px;
        left: 102px;
        width: 16px;
        height: 16px;
        z-index: 9;
      }
      .line-item-tooltip3 {
        position: absolute;
        top: 4px;
        left: 138px;
        width: 16px;
        height: 16px;
        z-index: 9;
      }
      .line-item-tooltip4 {
        position: absolute;
        top: 4px;
        left: 158px;
        width: 18px;
        height: 18px;
        z-index: 9;
      }
    }
  }
}

  
</style>